<script setup>
import { computed, ref, onMounted } from "vue";

const isShowAnimation = ref(false);
const visibleIndex = ref(-1); // 控制当前显示字符的索引

const text =
  ref(`中国历史上涌现了无数追求真理的科学家。张衡以地动仪揭示地震奥秘，祖冲之将圆周率精确到小数点后七位，沈括在《梦溪笔谈》中系统记录自然科学与工程技术，李时珍踏遍山川编撰《本草纲目》，重塑药物学体系。宋应星在《天工开物》中详述百工技艺，徐光启融合中西科学推动天文历法革新。他们以严谨的观察与实验精神，突破时代局限：如刘徽提出
            "割圆术" 开创极限思维，秦九韶创立 "大衍求一术"
            解决同余方程组，这些成就比西方同类研究早数百年。`); 

const chars = computed(() => [...text.value]);

// 处理每个字符动画结束事件
const handleAfterEnter = () => {
  visibleIndex.value++; // 逐个显示字符
};

onMounted(() => {
  setTimeout(() => {
    isShowAnimation.value = true;
    visibleIndex.value = 0; // 初始化显示第一个字符
  }, 100);
});
</script>

<template>
    <!-- 单个文字出来的效果 -->
  <div class="DynamicCharacters">
    <div v-for="(char, index) in chars" :key="index" class="char-container">
      <Transition
        enter-active-class="animate__animated animate__fadeInTopRight"
        leave-active-class="animate__animated animate__bounceOutRight"
        @after-enter="handleAfterEnter"
      >
        <div v-if="isShowAnimation && index <= visibleIndex" class="text">
          {{ char }}
        </div>
      </Transition>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.DynamicCharacters {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;

  .char-container {
    display: inline-block; // 确保正确换行

    .text {
      display: inline-block;
      animation-duration: 0.04s;
    }
  }
}
</style>
